<template>
  <AyFormPage ref="${entity?lower_case}DetailPage" :button-list="buttonList">
    <AyCard title="${table.comment!}">
      <AyForm ref="${entity?lower_case}Detail" :form-options="formOptions"></AyForm>
    </AyCard>
  </AyFormPage>
</template>

<script>
  import AyFormPage from '/@/components/AyUI/AyFormPage.vue';
  import AyForm from '/@/components/AyUI/AyForm.vue';
  import AyCard from '/@/components/AyUI/AyCard.vue';
  import AyTable from '/@/components/AyUI/AyTable.vue';
  export default {
    name: '${entity}Add|${table.comment!}表单',
    components: {
      AyFormPage,
      AyForm,
      AyCard,
      AyTable,
    },
    data() {
      return {
        tableItems: [],
        detailTableIns:null,
        showUserSelectModal: false,

        formData: {
          task: {
            issubmit: 0,
          },
          main: {
            <#list table.fields as field>
                <#if field.propertyName != "id">
                ${field.propertyName}: '',
                </#if>
            </#list>
          },
          list: [

          ],
        },
        buttonList: [
          { key: 'cancel', content: '取消', type: 'button', icon: 'vxe-icon-close', handler: 'handleCancel' },
          { key: 'reset', content: '重置', type: 'button', icon: 'vxe-icon-repeat', handler: 'handleReset' },
          { key: 'save', content: '保存', type: 'button', status: 'primary', icon: 'vxe-icon-save', loading: true, handler: 'save', validate: true, auth: ['admin', '${entity?lower_case}:save'] },
          { key: 'submit', content: '提交', type: 'button', status: 'primary', icon: 'vxe-icon-send', loading: true, handler: 'submit', validate: true, auth: ['admin', '${entity?lower_case}:submit'] },
        ],
      };
    },
    computed: {
      formOptions() {
        return {
          data: this.formData,
          items: [
               <#list table.fields as field>

${field.getMetaInfo().typeName}
                <#if field.propertyName != "id">

                <#if field.propertyType != "String">

                     { field: '${field.propertyName}', title: '${field.comment}', titleOverflow: 'ellipsis', span: 12, itemRender: { name: 'VxeInput' } },
                 <#else>
                     { field: '${field.propertyName}', title: '${field.comment}', titleOverflow: 'ellipsis', span: 12, itemRender: { name: 'VxeInput' } },

                 </#if>

                 </#if>
               </#list>
          ],
          rules: {
            <#list table.fields as field>
            'main.${field.propertyName}': [{ required: true, message: '${field.comment}' }],
            </#list>
          },
        };
      },

    },
    mounted() {
      //获取参数
      this.formOptions.data.main.code = this.$route.query.code || '';
      this.Init();
      this.detailTableIns=this.$refs.detailTable?.getGridInstance();
    },
    methods: {
      async save() {
        if(await this.detailTableIns.validate()){
          return;
        }
        this.formData.task.issubmit = 0;
        this.formData.list=this.detailTableIns.getTableData().visibleData;
        this.postSave({ ...this.formData });
      },
      submit(data) {
        this.formData.task.issubmit = 1;
        this.postSave({ ...this.formData });
      },
      async postSave(formData) {
        console.log(formData);
        const code = formData.main.code;
        if (!code) {
          const res = await this.$api.${entity?lower_case}.add${entity}(formData);
          if (res.code == 0) {
            //关闭弹窗
            this.handleCancel();
          } else {
            //提示错误
            this.$VxeUI.modal.message({ content: res.msg, status: 'error' });
          }
        } else {
          const res = await this.$api.${entity?lower_case}.edit${entity}(formData);
          if (res.code == 0) {
            this.handleCancel();
          } else {
            this.$VxeUI.modal.message({ content: res.msg, status: 'error' });
          }
        }
      },
      openUserSelect() {
        this.showUserSelectModal = true;
      },
      handleUserConfirm(selectedRows) {
        console.log('selectedRows', selectedRows);
        this.formOptions.data.main.sureusername = selectedRows[0].name;
        this.formOptions.data.main.sureuser = selectedRows[0].code;
        this.showUserSelectModal = false;
      },
      async Init() {
        if (this.formOptions.data.main.code != '') {
          const res = await this.$api.${entity?lower_case}.Get${entity}ByCode({ code: this.formOptions.data.main.code });
          this.formOptions.data.main = res;
        }

      },
      handleCancel() {
        this.$refs.${entity?lower_case}DetailPage.closeCurrent();
      },
      handleReset() {
        this.$refs.${entity?lower_case}Detail.handleReset();
      },
    },
  };
</script>
